<template>
  <div class="go-data-manage">
    <n-menu class="go-table-menu"
            v-model:value="activeKey"
            :options="menuOptions"
            @update:value="handleUpdateValue"
    />
    <table-inner :chart-config="ConfigInstance"/>
  </div>
</template>

<script setup lang="ts">
import {TableInner} from '@/packages/components/Tables/Tables/TableInner/index'
import Config from '@/packages/components/Tables/Tables/TablesBasic/config'
import type {MenuOption} from 'naive-ui'
import {h, onMounted, reactive, ref} from 'vue'

const ConfigInstance = reactive(new Config())
ConfigInstance.option.datasource = 'business_formula'
ConfigInstance.option.inputShow = 'flex'
ConfigInstance.attr.w = 900

// @ts-ignore
import DataManageApi from "@/api/DataManageApi.js";

const activeKey = ref('')

const menuOptions = ref([])
const LoadTables = () => {
  new DataManageApi().FindSystemDatabaseTableNames((res: any) => {
    for (let re of res) {
      re.label = re.TableAlias
      re.value = re.name
    }
    menuOptions.value = res
  })
}
/**
 * 菜单点击事件
 * @param key
 * @param item
 */
const handleUpdateValue = (key: string, item: MenuOption) => {
  ConfigInstance.option.datasource = key
}

onMounted(() => {
  LoadTables()
})
</script>

<style lang="scss" scoped>
.go-data-manage {
  display: flex;
}
</style>
